<template>
  <view class="wraps">
    <view class="toggle">
      <view class="score">
        <view class="pressure">
          <text class="name">{{ state.name }}</text>
          <text class="unit">{{ state.unit }}</text>
        </view>
        <view class="scoreId">
          <view v-if="state.transFlag && state.scoreFlag">{{ state.testScore }}</view>
          <view v-else>{{ state.currentScore }}</view>
        </view>
      </view>
      <view class="swipeWrap">
        <view class="line-con">
          <img class="img" src="@/static/image/hmm/25.png" alt="" />
          <text class="line"></text>
        </view>
        <swiper
          class="swipers"
          display-multiple-items="17"
          duration="400"
          easing-function="easeInOutCubic"
          @transition="transScore"
          @change="changeScore"
          :current="state.currentSwiper"
        >
          <swiper-item class="swiperItems" v-for="(item, index) in state.maxValue" :key="index">
            <view class="lines" v-if="index >= 8 && index <= state.maxValue"></view>
            <view class="num" v-if="index >= 8 && index <= state.maxValue">{{ index - 8 }}</view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
const props = defineProps({
  message: Object
})
const emit = defineEmits(['childEvent'])
const state = reactive({
  transFlag: false,
  scoreFlag: false,
  tabkeyboardShow: true,
  testScore: 0,
  currentScore: 0,
  currentSwiper: 0,
  maxValue: 100,
  name: '',
  unit: ''
})
watch(
  () => props.message,
  (newValue, oldValue) => {
    state.currentScore = newValue.currentScore
    state.currentSwiper = newValue.currentScore
    state.maxValue = newValue.maxValue + 17
    state.name = newValue.name
    state.unit = newValue.unit
  },
  {
    immediate: true,
    deep: true
  }
)
const transScore = (e) => {
  state.transFlag = true
  if (state.transFlag && state.scoreFlag) {
    // state.testScore =
    //   state.currentScore + Math.floor(e.detail.dx / 21) <= 0
    //     ? 0
    //     : state.currentScore + Math.floor(e.detail.dx / 20)
  } else {
    state.testScore = state.currentScore
  }
}
const changeScore = (e) => {
  state.currentSwiper = e.detail.current
  state.currentScore = state.currentSwiper ? e.detail.current : state.currentSwiper
  state.testScore = state.currentScore
  state.transFlag = false
  state.scoreFlag = false
  const params = {
    currentSwiper: state.currentSwiper,
    name: state.name
  }
  emit('childEvent', params)
  setTimeout(() => {
    state.scoreFlag = true
  }, 30)
}
</script>
<style lang="scss" scoped>
.wraps {
  .toggle {
    padding: 8rpx 0rpx 0rpx;
    border-radius: 16rpx;
    border-right: 1px solid #fbfcfdc2;
  }
  .score {
    display: flex;
    justify-content: space-between;
    color: #bdbdbd;
    font-size: 24rpx;
    align-items: flex-end;
    font-weight: bold;
    position: relative;
    height: 70rpx;
    margin-top: 22rpx;
    padding: 0 20rpx;
    .scoreId {
      color: #00d1b6;
      font-size: 64rpx;
      position: absolute;
      text-align: center;
      width: 100%;
      bottom: 10rpx;
      left: 0;
    }
    .pressure {
      position: absolute;
      left: 30rpx;
      top: 0;
      .name {
        font-size: 30rpx;
        color: #222;
        font-weight: 700;
        display: inline-block;
        vertical-align: middle;
      }
      .unit {
        font-size: 30rpx;
        color: #666;
        display: inline-block;
        vertical-align: middle;
        font-weight: 400;
        margin-left: 15rpx;
      }
    }
  }
  .swipers {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
    height: 100rpx;
  }
  .swiperItems {
    font-size: 24rpx;
    position: relative;
    height: 26rpx !important;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    .lines {
      background-color: #dfdfdf;
      width: 1rpx;
      height: 30rpx !important;
    }
    .num {
      position: absolute;
      bottom: -80rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 20rpx;
      color: #222;
      display: none;
    }
    &:nth-child(10n + 9) {
      .lines {
        background-color: #c6c6c6;
        height: 80rpx !important;
      }
    }
    &:nth-child(9) {
      .num {
        font-size: 32rpx;
        display: block;
      }
    }
    &:nth-child(10n + 19) {
      .num {
        font-size: 32rpx;
        display: block;
      }
    }
  }
  .swipeWrap {
    background: #f8f8f8;
    margin: 0 30rpx;
    padding-bottom: 16rpx;
    ::v-deep .line-con {
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .line {
        position: absolute;
        width: 1rpx;
        height: 55rpx;
        top: 0rpx;
        background: #00d1b6;
        z-index: 6;
      }
      .img {
        position: absolute;
        top: -2rpx;
        z-index: 6;
        width: 34rpx;
        height: 14rpx;
      }
    }
  }
}
</style>
